<template>
  <view class="content">
	  <!-- #ifdef APP-PLUS -->
	<view class="navbar" style="background-color: none;" :style="{height: `${state.titleBarHeight}px`}">
	</view>
	<!-- #endif -->
    <view class="header-box">
      <view class="header-left">{{ state.userName }}</view>
      <view class="header-center">
        <view class="header-item" :class="item.id == state.pageParams.isComplete ? 'header-item-cur' : ''"
          v-for="item in state.tabList" :key="item.id" @click="tabSelectFn(item)">{{ item.name }}</view>
      </view>
      <view class="header-right" >
		  <uni-icons type="more-filled" size="30" @click="settingAppFn"></uni-icons>
	  </view>
    </view>
    <view class="search-box">
      <van-icon name="search" /><input class="login-item-input" v-model="state.pageParams.content"
        placeholder="产品名称、编号" />
      <view class="search-btn" @click="searchBtn">搜索</view>
    </view>
    <view class="eq-item-head" v-if="state.eqHead.eqName !=''">
        <view class="eq-item-title-box">
            <text class="eq-item-title">{{ state.eqHead.eqName }}</text>
            <text class="eq-item-tip">{{ state.eqHead.eqCode }}</text>
        </view>
		<!-- #ifndef APP-PLUS -->
        <view class="switch-box" @click="turnUp">切换设备</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="switch-box" @click="turnUpApp">切换设备</view>
		<!-- #endif -->
    </view>
    <view class="list-box">
      <emptyBox v-if="state.listData.length == 0" :listData="state.listData" :isComplete="state.eqHead.eqName" @turnUp="turnUp" @turnUpApp="turnUpApp"/>
      <template v-else>
        <eqItem @turnUp="turnUp" v-for="(item,i) in state.listData" :key="item.id"
          :itemData="item" :itemIndex="i" />
      </template>
    </view>
    <scanCode v-if="state.isScanCode" @succesCode="succesCode" @closeScanCode="closeScanCode" />
	  <view class="pop-box" v-if="actionState.isShow">
		<view class="pop-main">
			<view class="pop-item" v-for="item in actionState.actions" :key="item.name" @click="onSelect(item.name)">{{item.name}}</view>
			<view class="pop-item pop-item-close" @click="onSelect('1')">关闭</view>
		</view>
	  </view>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance, ref } from "vue"
import emptyBox from "@/components/empty/index.vue"
import eqItem from "@/components/eqItem/index.vue"
import scanCode from "@/components/scanCode/index.vue"
import { onLoad } from "@dcloudio/uni-app"
import { removeAuthorization,getAuthorization } from "@/utils/auth.js"
import {
  loginOut, // 退出
} from '@/api/login/index.js'

import {
  getTaskReportList, // 获取列表
} from '@/api/list/index.js'
// import uniPopup from '@/components/uni-popup/uni-popup.vue';
const { proxy } = getCurrentInstance()
const state = reactive({
  tabList: [
    {
      id: 0, // 1已完成 0 未完成
      name: "未完成"
    },
    {
      id: 1, // 1已完成 0未完成
      name: "已完成"
    }
  ],
  pageParams: {
    // "deviceQRCode": "", //设备二维码内容
    "isComplete": 1, //0-未完成 1-已完成
	"deviceId":"", // 设备编码
    "content":"", // 查询条件
  },
  listData: [],
  isScanCode: false,
  userName: "",
  eqHead:{
    eqName:"",
    eqCode:""
  },
  titleBarHeight:0
})

onLoad((e) => {
  let name = getAuthorization("userName")
  state.userName = name
  actionState.actions[0].name = name
      uni.getSystemInfo({//获取系统信息
          success: res => {
			  console.log(res)
              state.titleBarHeight = res.statusBarHeight
          },
          fail(err) {
              console.log(err);
          }
      })
})

const tabSelectFn = (item) => {
  state.pageParams.isComplete = item.id
  getPageDataFn()
}

// 搜索
const searchBtn = () => {
  if (state.pageParams.deviceId == "") {
    uni.showToast({
      title: '请先扫码绑定设备',
      icon: "none"
    })
    return
  }
  state.listData = []
  getPageDataFn()
}

// 获取列表
const getPageDataFn = async () => {
  try {
    uni.showLoading({
      title: '获取中',
    });
    let data = await proxy.$post(getTaskReportList, state.pageParams)
    state.listData = data.data.list
    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
    state.submitLoading = false
  }
}

let actionState = reactive({
  isShow: false,
  actions: [
    { name: '姓名' },
    { name: '退出' },
  ]
});

let popup = ref(null)
const settingAppFn = () => {
 actionState.isShow = true
}

// 打开设置
const settingFn = () => {
  actionState.isShow = true
}

const turnUp = () => {
  uni.navigateTo({
    url:"/pages/detail/index"
  })
  // state.isScanCode = true
}

const turnUpApp = () =>{
	// 允许从相机和相册扫码
	uni.scanCode({
		success: function (res) {
			let resData = res.result
			succesCode(resData)
		}
	});
}

const closeScanCode = () => {
  state.isScanCode = false
}

// 扫码成功
const succesCode = (data) => {
  let resArr = data.split('/')
  state.listData = []
  // state.pageParams.deviceQRCode = resArr[1] + '/'+resArr[2]
  state.pageParams.deviceId = parseInt(resArr[0])
  state.pageParams.isComplete = 0
  state.isScanCode = false
  state.eqHead.eqName = resArr[1]
  state.eqHead.eqCode = resArr[2]
  getPageDataFn()
}

// 操作按钮
const onSelect = (e) => {
	if(e == "1"){
		actionState.isShow = false
	}
  if (e == "退出") {
    loginOutFn()
  }
}

// 退出
const loginOutFn = async () => {
  try {
    uni.showLoading({
      title: '退出中',
    });
    await proxy.$post(loginOut, state.formData)
    removeAuthorization("Auth")
    removeAuthorization("userName")
    uni.hideLoading();
    uni.navigateTo({
      url: '/pages/login/index'
    });
  } catch (error) {
    uni.hideLoading();
    state.submitLoading = false
  }
}

</script>

<style lang="scss" scoped>
.header-box,
.header-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx;
}

.header-box {
  padding: 20rpx 40rpx;
}

.header-left {
  font-style: normal;
  font-weight: 500;
  font-size: 32rpx;
  height: 78rpx;
  line-height: 78rpx;
  overflow: hidden;
  width: 30%;
}

.header-right{
  width: 30%;
  display: flex;
  justify-content: flex-end;
}

.header-center {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20rpx;
}

.header-item {
  width: 152rpx;
  height: 76rpx;
  text-align: center;
  line-height: 76rpx;
  border-radius: 20rpx;
  font-weight: 400;
  font-size: 32rpx;
  color: #88879C;
}

.header-item-cur {
  color: #fff;
  background: radial-gradient(125% 125% at 85.42% 0%, #85D3FF 0%, #2596D7 100%);
}

.search-box {
  height: 96rpx;
  background: #fff;
  border-radius: 20rpx;
  margin: 0 40rpx;
  display: flex;
  align-items: center;
  font-size: 32rpx;

  .van-icon {
    font-size: 40rpx;
    color: #8F92A1;
    margin: 0 20rpx;
  }

  .login-item-input {
    display: block;
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
  }

  .search-btn {
    flex: none;
    font-weight: 400;
    font-size: 32rpx;
    line-height: 22px;
    color: #029CCF;
    margin-right: 40rpx;
  }
}

.eq-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:20rpx 40rpx;

    .eq-item-title-box {
        width: 100%;
    }

    .eq-item-title {
        font-weight: 700;
        font-size: 36rpx;
        color: #223263;
    }

    .eq-item-tip {
        font-style: normal;
        font-weight: 400;
        font-size: 24rpx;
        color: #223263;
        margin-left: 10rpx;
    }
}
.switch-box {
    padding: 4px 16px;
    height: 64rpx;
    right: 52rpx;
    background: radial-gradient(125% 125% at 85.42% 0%, #85D3FF 0%, #FE9B4B 0.01%, #F47814 100%);
    border-radius: 8rpx;
    font-size: 28rpx;
    line-height: 64rpx;
    text-align: center;
    color: #FFFFFF;
    flex: none;
}
.pop-box{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:rgba(0,0,0,.2);
	z-index:999;
	.pop-main{
		width:100%;
		background:#fff;
		padding-bottom:2rpx;
		position:fixed;
		left:0;
		bottom:0;
		right:0;
		border-radius: 18rpx 18rpx 0 0;
		padding-top:20rpx;
		.pop-item{
			text-align:center;
			padding:30rpx 0;
		}
		.pop-item-close{
			border-top:15rpx solid #f2f2f2;
			margin-top:10rpx;
		}
	}
}
</style>
